<template>
  <div class="refund-detail-pending">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>退款详情-待处理</h2>
      <button @click="goBack" class="back-button">返回</button>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="loadDetail" class="retry-button">重试</button>
    </div>
    
    <!-- 详情内容 -->
    <div v-else-if="detailData" class="detail-content">
      <!-- 订单信息 -->
      <div class="order-info-section">
        <h3>订单信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>服务编号：</label>
            <span>{{ detailData.applicationNo || '-' }}</span>
          </div>
          <div class="info-item">
            <label>申请状态：</label>
            <span class="status-badge pending">{{ detailData.statusText || '待处理' }}</span>
          </div>
          <div class="info-item">
            <label>申请时间：</label>
            <span>{{ formatDateTime(detailData.applyTime) }}</span>
          </div>
          <div class="info-item">
            <label>用户名：</label>
            <span>{{ detailData.userPhone || '13800138001' }}</span>
          </div>
          <div class="info-item">
            <label>订单编号：</label>
            <span>{{ detailData.orderId || '-' }}</span>
          </div>
          <div class="info-item">
            <label>订单金额：</label>
            <span>¥{{ detailData.amount || 0 }}</span>
          </div>
          <div class="info-item">
            <label>实际退款金额：</label>
            <span>¥{{ detailData.amount || 0 }}</span>
          </div>
          <div class="info-item">
            <label>退款方式：</label>
            <span>{{ detailData.refundChannel || '退回到原支付渠道' }}</span>
          </div>
          <div class="info-item">
            <label>退款类型：</label>
            <span>{{ detailData.refundType || '-' }}</span>
          </div>
        </div>
      </div>
      
      <!-- 处理备注 -->
      <div class="remark-section">
        <h3>处理备注</h3>
        <textarea 
          v-model="remark" 
          placeholder="请输入..."
          class="remark-textarea"
          rows="4"
        ></textarea>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <button 
          @click="confirmRefund" 
          :disabled="processing"
          class="confirm-button"
        >
          {{ processing ? '处理中...' : '确认退款' }}
        </button>
        <button 
          @click="rejectRefund" 
          :disabled="processing"
          class="reject-button"
        >
          {{ processing ? '处理中...' : '拒绝退款' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import api from '../utils/request';

const router = useRouter();
const route = useRoute();

// 响应式数据
const loading = ref(false);
const error = ref('');
const processing = ref(false);
const detailData = ref<any>(null);
const remark = ref('');

// 获取路由参数中的ID
const refundId = route.params.id;

// 方法
const loadDetail = async () => {
  if (!refundId) {
    error.value = '缺少退款申请ID';
    return;
  }

  loading.value = true;
  error.value = '';

  try {
    const response = await api.refundApplication.getDetail(Number(refundId));
    
    if (response && response.data) {
      detailData.value = response.data;
    } else {
      error.value = '获取退款详情失败';
    }
  } catch (err: any) {
    console.error('获取退款详情失败:', err);
    error.value = err.message || '获取退款详情失败';
  } finally {
    loading.value = false;
  }
};

const confirmRefund = async () => {
  if (!detailData.value) return;
  
  processing.value = true;
  
  try {
    const requestData = {
      id: detailData.value.id,
      remark: remark.value || '确认退款',
      operatorId: 1 // 这里应该使用当前登录用户的ID
    };

    const response = await api.refundApplication.confirm(requestData);
    
    if (response && response.data) {
      alert('退款申请确认成功');
      // 返回列表页面并传递刷新参数
      router.push('/refund-application?refresh=true');
    } else {
      alert('确认失败：未知错误');
    }
  } catch (err: any) {
    console.error('确认退款失败:', err);
    alert('确认失败：' + (err.message || '未知错误'));
  } finally {
    processing.value = false;
  }
};

const rejectRefund = async () => {
  if (!detailData.value) return;
  
  processing.value = true;
  
  try {
    const requestData = {
      id: detailData.value.id,
      remark: remark.value || '拒绝退款',
      operatorId: 1 // 这里应该使用当前登录用户的ID
    };

    const response = await api.refundApplication.reject(requestData);
    
    if (response && response.data) {
      alert('退款申请拒绝成功');
      // 返回列表页面并传递刷新参数
      router.push('/refund-application?refresh=true');
    } else {
      alert('拒绝失败：未知错误');
    }
  } catch (err: any) {
    console.error('拒绝退款失败:', err);
    alert('拒绝失败：' + (err.message || '未知错误'));
  } finally {
    processing.value = false;
  }
};

const goBack = () => {
  // 返回上一页并刷新数据
  router.go(-1);
};

const formatDateTime = (dateTime: string | null) => {
  if (!dateTime) return '-';
  try {
    const date = new Date(dateTime);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch {
    return dateTime;
  }
};

// 生命周期
onMounted(() => {
  loadDetail();
});
</script>

<style scoped>
.refund-detail-pending {
  padding: 60px 80px 60px 120px;
  min-height: 100vh;
  background-color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.back-button {
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #40a9ff;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-container {
  text-align: center;
  padding: 100px 20px;
  color: #f5222d;
}

.retry-button {
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.detail-content {
  max-width: 800px;
}

.order-info-section {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.order-info-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: 500;
  color: #666;
  min-width: 120px;
  margin-right: 12px;
}

.info-item span {
  color: #333;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.pending {
  background-color: #fff3cd;
  color: #856404;
}

.remark-section {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.remark-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.remark-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}

.remark-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.confirm-button {
  padding: 12px 24px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.confirm-button:hover:not(:disabled) {
  background-color: #40a9ff;
}

.confirm-button:disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.reject-button {
  padding: 12px 24px;
  background-color: white;
  color: #f5222d;
  border: 1px solid #f5222d;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.reject-button:hover:not(:disabled) {
  background-color: #f5222d;
  color: white;
}

.reject-button:disabled {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #d9d9d9;
  cursor: not-allowed;
}
</style> 